<template>
  <div class="cc_zi">
    <div v-text="'子组件自己的值： ' + b"></div>
    <div v-text="'子组件接收来自父组件的值: ' + valueRomFu"></div>
    <div>
      <a-button @click="changeFuValue" type="primary"
        >修改父组件自己的值</a-button
      >
    </div>
    <div>
      <a-button @click="changeFromFuValue" type="primary"
        >修改父组件传递给子组件的值</a-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const b = ref<string>("value from son");

const dataFu = defineProps(["valueRomFu"]);

const emit = defineEmits(["changeFuValueFromZi", "changeSendValueByZi"]);

const changeFuValue = (): void => {
  emit("changeFuValueFromZi", "change from zi");
};

const changeFromFuValue = (): void => {
  emit("changeSendValueByZi", "send value from fu change by zi");
};

const changeSelfValueByFu = (v: string): void => {
  b.value = v;
};
// 暴露子组件的自有方法，供父组件使用
defineExpose({ changeSelfValueByFu });
</script>

<style scoped lang="scss">
.cc_zi {
  width: 100%;
  background-color: #93b5cf;
  color: #000;
  padding: 10px;
  div {
    margin-bottom: 10px;
  }
}
</style>
